<template>
    <div class="user-add-card">

        <ul class="form-box">
            <li class="form__item disabled">
                <span class="form__key">本人真实姓名</span>
                <div class="form__value">
                    <span class="item"> {{userInfo.user.realName}} </span>
                </div>
            </li>
            <li class="form__item disabled">
                <span class="form__key">身份证号</span>
                <div class="form__value">
                    <span class="item"> {{userInfo.user.idNumber}} </span>
                </div>
            </li>
            <li class="form__item disabled" v-if='oldcard'>
                <span class="form__key">原银行卡号</span>
                <div class="form__value">
                    <span class="item"> {{oldcard}} </span>
                </div>
            </li>
            <li class="form__item" v-if='oldcard'>
                <span class="form__key">新银行卡号</span>
                <div class="form__value">
                    <input v-model='card' type="tel" placeholder="请输入银行储蓄卡卡号">
                </div>
            </li>
            <li class="form__item" v-if='!oldcard'>
                <span class="form__key">银行卡号</span>
                <div class="form__value">
                    <input v-model='card' type="tel" placeholder="请输入银行储蓄卡卡号">
                </div>
            </li>
            <li class="form__item">
                <span class="form__key">银行预留手机号</span>
                <div class="form__value">
                    <input v-model='tel' type="tel" placeholder="请输入手机号">
                </div>
            </li>
            <li class="form__item verification" v-if='oldcard'>
                <input class="form__key" v-model='code' type="tel" placeholder="请输入验证码">
                <div class="form__value">
                    <verification-code class='component-sms-code__code' v-model='sent' @click='getCode'></verification-code>
                </div>
            </li>
        </ul>

        <div class="bind-card-button" @click='add'>
            <span class="button long">确认</span>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import verificationCode from '../components/VerificationCode.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { userAddCardVerifiedValidation } from '../validation/validation'
    import { getQueryString } from '../utils/utils'
    import { userApi, lenderApi, bankcardApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            verificationCode,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,tabBox,
            tab
        },
        data() {
            return {
                name:'',
                id:'',
                code:'',
                sent:false,
                oldcard:this.$route.query.oldcard,
                card:'',
                tel:'',
                show_warning:false,
                routerName:this.$route.query.routername
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            userInfo(){
                return this.localInfo.userInfo
            },
            ageAuth(){
                let id = this.id
                let date = id.substring(6, 10) + "-" + id.substring(10, 12) + "-" + id.substring(12, 14);
                let momentDate = moment(date)
                let momentNow = moment()
                let diff = momentNow.diff(momentDate, 'years')
                
                if(diff>=18 && diff<= 55){
                    return true
                }
                return false
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setGoHome'
            ]),

            // function

            goRouter(){
                if(this.routerName){
                    let query = _.clone(this.$route.query)
                    query.status = ''

                    this.$router.push({
                        name:this.routerName,
                        query:query
                    })
                }
                else{
                    this.$router.push({
                        name:'user-bind-card-list'
                    })
                }
            },
            add(item){
                let params = {
                    card:this.card,
                    tel:this.tel
                }
                if(!userAddCardVerifiedValidation(params)) return

                if(!this.oldcard){
                    this.showLoading()
                    bankcardApi.add({
                        cardNo:this.card,
                        mobile:this.tel,
                        returnUrl:location.href
                    })
                    .then(result=>{
                        if(result.jump){
                            location.href = result.url
                            return
                        }
                        this.setMsgTip({
                            text:'添加银行卡成功',
                            type:'success'
                        })
                        this.$router.back()
                        this.hideLoading()
                        console.log(result)
                    })
                    .catch(error=>{
                        this.hideLoading()
                        console.error(error)
                    })
                }
                else{
                    if(!this.code){
                        this.setMsgTip({
                            text:'请输入验证码',
                            type:'warn'
                        })
                        return
                    }
                    this.showLoading()
                    bankcardApi.change({
                        oldCardNo:this.oldcard,
                        newCardNo:this.card,
                        mobile:this.tel,
                        smsCode:this.code,
                        returnUrl:location.href
                    })
                    .then(result=>{
                        if(result.jump){
                            location.href = result.url
                            return
                        }
                        this.setMsgTip({
                            text:'更换银行卡成功',
                            type:'success'
                        })
                        this.$router.back()
                        this.hideLoading()
                        console.log(result)
                    })
                    .catch(error=>{
                        this.hideLoading()
                        console.error(error)
                    })
                }
            },
            getList(num){
                this.loading = true
                allApi.userList(num)
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getCode(){
                if(this.sent) return
                this.sent = true

                userApi.sendSms({
                    mobile:this.tel,
                    type:'DEFAULT'
                })
                .then(result=>{

                })
                .catch(error => {
                    console.error(error)
                    this.sent = false
                })
            },
            getAccount(){
                this.loading_count = true
                allApi.userCount()
                .then(result=>{
                    this.loading_count = false
                    this.userCount = result
                })
                .catch(error => {
                    console.error(error)
                    this.loading_count = false
                })
            },
        },
        created(){
            this.setGoHome(true)
            this.tel = this.userInfo.user && this.userInfo.user.mobile
            let status = this.$route.query.status
            let msg = decodeURIComponent(this.$route.query.msg)
            if(status == 'fail'){
                this.setMsgTip({
                    text:msg,
                    type:'error'
                })
            }
            if(status == 'success'){
                this.goRouter()
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-add-card{
        .bind-card-button{
            margin-top: 30px;
            padding:0 22px 30px 22px;
        }
        .verification{
            .form__value{
                justify-content: flex-end;
                flex:none;
            }
            .form__key{
                flex:1;
            }
        }
    }

</style>
